<template>
    <view class="page-container">
        <!-- 背景图 -->
        <image class="background-image" :src="backgroundImage" mode="aspectFill"></image>
        <view class="content-container">
            <!-- 轮播图 -->
            <unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
                         field="_id,bannerfile,open_url,title" @load="onqueryload">
                <swiper v-if="!loading && data.length" class="swiper-box" @change="changeSwiper" :current="current" indicator-dots>
                    <swiper-item v-for="(item, index) in data" :key="item._id">
                        <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" @click="clickBannerItem(item)" :draggable="false" />
                    </swiper-item>
                </swiper>
                <image v-else class="banner-image" src="/static/uni-center/headers.png" mode="aspectFill" :draggable="false" />
            </unicloud-db>
            <!-- 快捷入口 -->
            <view class="quick-entry">
                <view class="entry-item" @click="goToHotGoods">
                    <image class="entry-icon" src="/static/home/icon1.png" mode="aspectFill"></image>
                    <text>热门商品</text>
                </view>
                <view class="entry-item" @click="goToPointsMall">
                    <image class="entry-icon" src="/static/home/icon2.png" mode="aspectFill"></image>
                    <text>积分商城</text>
                </view>
                <view class="entry-item" @click="goToConsumptionVerification">
                    <image class="entry-icon" src="/static/home/icon3.png" mode="aspectFill"></image>
                    <text>全麻核销</text>
                </view>
                <view class="entry-item" @click="goToShareholderExclusive">
                    <image class="entry-icon" src="/static/home/icon4.png" mode="aspectFill"></image>
                    <text>股东专享</text>
                </view>
            </view>
            <!-- 热销产品 -->
            <view class="hot-products">
                <text class="section-title">热销产品</text>
                <scroll-view class="product-list" scroll-x>
                    <view class="product-item" v-for="(product, index) in hotProducts" :key="index" @click="goToProductDetail(product.id)">
                        <image class="product-image" :src="product.image" mode="aspectFill"></image>
                    </view>
                    <view class="product-item more-products" @click="goToProductList">
                        <text>更多商品</text>
                    </view>
                </scroll-view>
            </view>
            <!-- 店铺详情 -->
            <view class="shop-detail">
                <text class="section-title">店铺详情</text>
                <unicloud-db v-slot:default="{data}" collection="uni-cms-articles" where="article_status == 1" orderby="publish_date desc" :page-size="1">
                    <render-article-detail
                        v-if="data.length"
                        :content="data[0].content"
                        :content-images="data[0].content_images"
                        class="article-content"
                    />
                </unicloud-db>
            </view>
            <!-- 店铺位置地图卡片 -->
            <map :latitude="latitude" :longitude="longitude"  :scale="20" :markers="covers" style="width: 100%; height: 300px;"></map>
        </view>
    </view>
</template>

<script>
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
const db = uniCloud.database();
const articleDBName = 'uni-cms-articles';

export default {
    components: {
        renderArticleDetail
    },
    data() {
        return {
            backgroundImage: 'your_background_image_url',
            current: 0,
            hotProducts: [
                { id: 1, image: 'product_image_url_1' },
                { id: 2, image: 'product_image_url_2' },
                { id: 3, image: 'product_image_url_3' },
            ],
            adpId: "",
            watchAdUniqueType: "device",
            latitude: 39.60194,
            longitude: 116.75358,
            covers: [
                {
                    latitude: 39.60214,
                    longitude: 116.75358,
                    iconPath: '../../../../../static/covers.png'
                }
            ]
        };
    },
    methods: {
        onqueryload() {
            // 这里可以添加加载完成后的逻辑
        },
        changeSwiper(e) {
            this.current = e.detail.current;
        },
        clickBannerItem(item) {
            if (item.open_url) {
                uni.navigateTo({
                    url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
        },
        goToHotGoods() {
            uni.navigateTo({
                url: '/pages/product/hot-goods'
            });
        },
        goToPointsMall() {
            uni.navigateTo({
                url: '/pages/product/points-mall'
            });
        },
        goToConsumptionVerification() {
            uni.navigateTo({
                url: '/pages/order/consumption-verification'
            });
        },
        goToShareholderExclusive() {
            uni.navigateTo({
                url: '/pages/ucenter/shareholder-exclusive'
            });
        },
        goToProductDetail(productId) {
            uni.navigateTo({
                url: `/pages/product/detail?id=${productId}`
            });
        },
        goToProductList() {
            uni.navigateTo({
                url: '/pages/product/list'
            });
        },
        publishTime(timestamp) {
            return translatePublishTime(timestamp);
        },
        async onUnlockContent() {
            // 可以根据实际情况修改这里的逻辑
        }
    }
};
</script>

<style scoped>
.page-container {
    position: relative;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.content-container {
    padding: 20px;
}

.swiper-box {
    width: 100%;
    height: 50vh;
}

.banner-image {
    width: 100%;
    height: 100%;
}

.quick-entry {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

.entry-item {
    text-align: center;
}

.entry-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.hot-products {
    margin-top: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.product-list {
    white-space: nowrap;
}

.product-item {
    display: inline-block;
    width: calc(100% / 3.5);
    margin-right: 10px;
}

.product-image {
    width: 100%;
    height: auto;
}

.more-products {
    text-align: center;
    line-height: 100px;
    background-color: #f0f0f0;
}

.shop-detail {
    margin-top: 20px;
}
</style>
